<template>
    <div class="safeForm">
        <div class="form">
            <div class="form-title" @click="goLogin"><i class="el-icon-arrow-left"></i> 安全验证</div>
            <div class="form-tip">首次使用账号密码进入系统需要进行安全验证并修改密码</div>
            <el-form ref="safeForm" key="1" :model="safeForm" :rules="safeRules" class="login-form"
                label-position="top">

                <el-form-item label="手机号" prop="userphone">
                    <el-input class="input" ref="userphone" v-model="safeForm.userphone" placeholder="请输入" clearable
                        name="userphone" type="text" tabindex="1" />
                </el-form-item>
                <el-form-item label="验证码" prop="code">
                    <el-input class="input" ref="code" v-model="safeForm.code" placeholder="请输入" name="code" type="text"
                        clearable tabindex="1">
                        <el-link slot="append" type="primary" class="show-pwd" :underline="false"
                            :disabled="timeTxt == '获取验证码' ? false : true" @click="getNumCode">{{ timeTxt
                            }}</el-link>
                    </el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="new_password">
                    <el-input class="input" ref="new_password" v-model="safeForm.new_password" placeholder="请输入新密码"
                        name="new_password" clearable show-password tabindex="1">
                    </el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="repeat_password">
                    <el-input class="input" ref="repeat_password" v-model="safeForm.repeat_password"
                        placeholder="请再次输入新密码" name="repeat_password" clearable show-password tabindex="1">
                    </el-input>
                </el-form-item>
                <el-button style="width: 100%;" :loading="loading" type="primary" class="login-btn"
                    @click.native.prevent="handleLogin">进入系统
                </el-button>
            </el-form>


        </div>
    </div>
</template>
  
<script>
import {
    forgetPasswordApi, sendMsg
} from "@/api/user";
export default {
    name: "Login",
    data() {
        const valiuserphone = (rule, value, callback) => {
            if (!value) {
                return callback(new Error("请输入手机号码"));
            } else if (!/^1[0123456789]\d{9}$/.test(value)) {
                return callback(new Error("手机号码格式有误"));
            } else {
                callback();
            }
        };
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else {
                if (this.safeForm.repeat_password !== '') {
                    this.$refs.safeForm.validateField('repeat_password');
                }
                callback();
            }
        };
        var validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.safeForm.new_password) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return {
            picUrl: "",
            safeForm: {
                userphone: "",
                code: '',
                new_password: "",
                repeat_password: "",
                token: ""
            },
            safeRules: {
                userphone: [{ required: true, validator: valiuserphone, trigger: "blur" }],
                code: [{ required: true, trigger: "blur", message: "请输入验证码" }],
                new_password: [{ required: true, validator: validatePass, trigger: 'blur' }],
                repeat_password: [{ required: true, validator: validatePass2, trigger: 'blur' }],
            },
            loading: false,
            redirect: undefined,
            otherQuery: {},
            passShow: false,
            timeNum: 0, // 验证码
            disabled: false,
            timeTxt: "获取验证码",
        };
    },

    watch: {
        $route: {
            handler: function (route) {
                const query = route.query;
                if (query) {
                    this.redirect = query.redirect;
                    this.otherQuery = this.getOtherQuery(query);
                }
            },
            immediate: true,
        },
        token: {
            handler: function (nVal) {
                this.token = nVal
            },
            immediate: true,
        }
    },

    mounted() {

    },

    methods: {
        goLogin() {
            this.$emit('changeType')
        },
        init(obj) {
            console.log(obj)
            this.safeForm.userphone = obj.userphone
            this.safeForm.token = obj.token
        },
        getNumCode() {

            var time = 59
            const _this = this

            this.$refs.safeForm.validateField('userphone', (userphoneError) => {
                if (userphoneError) {
                    return false
                } else {
                    clearInterval(set)
                    var set = setInterval(function () {
                        _this.$set(_this, 'timeTxt', `${time}秒后重试`)
                        time--
                        if (time == 0) {
                            _this.timeTxt = '获取验证码'
                            clearInterval(set)
                        }
                    }, 1000)

                    sendMsg({ mobile: this.safeForm.userphone }).then(res => { })
                }
            })
        },
        loginTypeChange(type) {
            this.safeForm.type = type
        },
        changePass() {
            this.form = {};
            this.passShow = true;
        },
        handleLogin() {
            console.log('进入')
            this.$refs.safeForm.validate((valid) => {
                if (valid) {

                    console.log('验证通过')
                    this.loading = true;
                    this.$store.dispatch("user/safeVerify", this.safeForm).then((res) => {
                        console.log('11111', res)
                        this.loading = false;
                        this.$router.push({
                            path:"/",
                            query: this.otherQuery,
                        });

                    }).catch(() => {
                        this.loading = false;
                    });
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        submit() {
            this.$refs.oneForm.validate((valid) => {
                if (valid) {
                    this.form.event = "save";
                    forgetPasswordApi(this.form).then((res) => {
                        if (res) {
                            this.$message({
                                message: "修改成功!",
                                type: "success",
                            });
                            this.passShow = false;
                        }
                    });
                }
            });
        },
        getOtherQuery(query) {
            return Object.keys(query).reduce((acc, cur) => {
                if (cur !== "redirect") {
                    acc[cur] = query[cur];
                }
                return acc;
            }, {});
        },
    }
};
</script>

<style lang="scss" scoped>
.safeForm {


    .form {
        width: 360px;

        &-title {
            font-weight: 600;
            font-size: 24px;
            padding-bottom: 30px;
            cursor: pointer;
        }

        &-tip {
            font-size: 14px;
            color: #4E5969;
            padding-bottom: 12px;
        }

        .tabs {
            display: flex;
            font-size: 18px;
            margin-bottom: 20px;

            &-item {
                margin-right: 40px;
                height: 30px;
                position: relative;
                cursor: pointer;
            }

            &-itemSelect {
                font-weight: 600;
            }

            .tabs-itemSelect::after {
                content: "";
                position: absolute;
                display: block;
                height: 2px;
                background: #37A6E5;
                width: 30px;
                bottom: 0;
                left: calc(50% - 15px);
            }
        }

    }
}
</style>